<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>经营信息</title>

    <link rel="stylesheet" href="../../../../bangnuo/css/operation/add_merchants_new.css">

    <script src="../../../../bangnuo/vue/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../../../../bangnuo/bootstrap/js/jquery-3.4.1.js"></script>
    <script src="../../../../bangnuo/vue/axios.min.js"></script>
    <script type="module" src="../../operation/js/config/public.js"></script>
    <style>
        .main-body{
            width: 80%;
            margin: 0 auto;
        }
        .input-header{
            margin: 0px auto;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 158px;
            height: 158px;
            line-height: 158px;
            text-align: center;
        }
        .avatar {
            width: 158px;
            height: 158px;
            display: block;
        }

        .label-title-bottom{
            height: auto;
            margin-bottom:20px
        }

        .span-font-color{
            color: #409EFF
        }

    </style>
</head>
<body>
<div id="app">
    <div class="main-body">
    <div class="input-header">
        <el-row>
            <el-steps :space="200" :active="1" finish-status="success">
                <el-step title="主体信息"></el-step>
                <el-step title="经营信息"></el-step>
                <el-step title="结算规则"></el-step>
                <el-step title="结算账户"></el-step>
                <el-step title="超级管理员"></el-step>
                <el-step title="保存完成"></el-step>
            </el-steps>
        </el-row>
        <el-row style="width: 500px;margin-top: 40px">
            <el-form ref="form" :model="form" label-width="100px" label-position="left" width="50%">
                <el-form-item label="商户简称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label="客服电话">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label="经营场景">
                    <el-checkbox-group v-model="form.salesScenesType" @change="salesScenes">
                        <el-checkbox label="SALES_SCENES_STORE" name="type">线下门店</el-checkbox>
                        <el-checkbox label="SALES_SCENES_MP" name="type">公众号</el-checkbox>
                        <el-checkbox label="SALES_SCENES_MINI_PROGRAM" name="type">小程序</el-checkbox>
                        <el-checkbox label="SALES_SCENES_APP" name="type">APP</el-checkbox>
                        <el-checkbox label="SALES_SCENES_WEB" name="type">互联网</el-checkbox>
                        <el-checkbox label="SALES_SCENES_WEWORK" name="type">企业微信</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

                <span v-if="form.salesScenesType.indexOf('SALES_SCENES_STORE') > -1">
                    <div class="label-title-bottom">
                        <label><span class="span-font-color">|</span>线下门店</label>
                    </div>
                    <el-form-item label="门点名称">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>

                    <el-form-item label="门店省市">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                     <el-form-item label="门店街道名称">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>

                    <el-form-item label="门店门头照片">
                        <el-upload
                                class="avatar-uploader"
                                action="/upload/img2/permissionsPictureBank"
                                :auto-upload="autoUpload"
                                name="file"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <!--用于上传图片预览-->
                            <img v-if="img" :src="img"  class="avatar">
                            <!--用于展示上传图标，当imageUrl为null时，就展示空白，当imageUrl有了值，就会展示指向该地址的图片-->
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>

                    <el-form-item label="门店环境照片">
                        <el-upload
                                class="avatar-uploader"
                                action="/upload/img2/permissionsPictureBank"
                                :auto-upload="autoUpload"
                                name="file"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <!--用于上传图片预览-->
                            <img v-if="img" :src="img"  class="avatar">
                            <!--用于展示上传图标，当imageUrl为null时，就展示空白，当imageUrl有了值，就会展示指向该地址的图片-->
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>


                    <el-form-item label="线下场所对应的商家AppID">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>

                </span>

                <span v-if="form.salesScenesType.indexOf('SALES_SCENES_MP') > -1">
                    <div class="label-title-bottom">
                        <label><span class="span-font-color">|</span>公众号</label>
                    </div>
                    <el-form-item label="AppID所属">
                            <el-radio v-model="appIdClass" label="0">服务商公众号AppID</el-radio>
                            <el-radio v-model="appIdClass" label="1">商家公众号AppID</el-radio>
                    </el-form-item>

                     <el-form-item v-if="appIdClass==0" label="服务商公众号AppID">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>

                    <el-form-item v-else label="商家公众号AppID">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                     <el-form-item label="公众号页面截图（选填）">
                        <el-upload
                                class="avatar-uploader"
                                action="/upload/img2/permissionsPictureBank"
                                :auto-upload="autoUpload"
                                name="file"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <!--用于上传图片预览-->
                            <img v-if="img" :src="img"  class="avatar">
                            <!--用于展示上传图标，当imageUrl为null时，就展示空白，当imageUrl有了值，就会展示指向该地址的图片-->
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </span>

                <span v-if="form.salesScenesType.indexOf('SALES_SCENES_MINI_PROGRAM') > -1">
                    <div class="label-title-bottom">
                        <label><span class="span-font-color">|</span>小程序</label>
                    </div>
                    <el-form-item label="AppID所属">
                        <el-radio-group v-model="smallAppIdClass">
                            <el-radio label="0">服务商小程序AppID</el-radio>
                            <el-radio label="1">商家小程序AppID</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item v-if="smallAppIdClass==0" label="服务商小程序AppID">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>

                    <el-form-item v-else label="商家小程序AppID">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                     <el-form-item label="APP截图">
                        <el-upload
                                class="avatar-uploader"
                                action="/upload/img2/permissionsPictureBank"
                                :auto-upload="autoUpload"
                                name="file"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <!--用于上传图片预览-->
                            <img v-if="img" :src="img"  class="avatar">
                            <!--用于展示上传图标，当imageUrl为null时，就展示空白，当imageUrl有了值，就会展示指向该地址的图片-->
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </span>

                <span v-if="form.salesScenesType.indexOf('SALES_SCENES_APP') > -1">
                    <div class="label-title-bottom">
                        <label><span class="span-font-color">|</span>APP</label>
                    </div>
                    <el-form-item label="AppID所属">
                        <el-radio v-model="appAppIdClass" label="0">服务商公众号AppID</el-radio>
                        <el-radio v-model="appAppIdClass" label="1">商家公众号AppID</el-radio>
                    </el-form-item>

                    <el-form-item v-if="appAppIdClass==0" label="服务商应用AppID">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>

                    <el-form-item v-else label="商家应用AppID">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                     <el-form-item label="APP截图">
                        <el-upload
                                class="avatar-uploader"
                                action="/upload/img2/permissionsPictureBank"
                                :auto-upload="autoUpload"
                                name="file"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <!--用于上传图片预览-->
                            <img v-if="img" :src="img"  class="avatar">
                            <!--用于展示上传图标，当imageUrl为null时，就展示空白，当imageUrl有了值，就会展示指向该地址的图片-->
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </span>

                <span v-if="form.salesScenesType.indexOf('SALES_SCENES_WEB') > -1">
                    <div class="label-title-bottom">
                        <label><span class="span-font-color">|</span>互联网网站</label>
                    </div>
                    <el-form-item label="互联网网站域名">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>

                     <el-form-item label="网站授权函">
                        <el-upload
                                class="avatar-uploader"
                                action="/upload/img2/permissionsPictureBank"
                                :auto-upload="autoUpload"
                                name="file"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <!--用于上传图片预览-->
                            <img v-if="img" :src="img"  class="avatar">
                            <!--用于展示上传图标，当imageUrl为null时，就展示空白，当imageUrl有了值，就会展示指向该地址的图片-->
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>

                    <el-form-item label="互联网网站对应的商家AppID（选填）">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </span>

                <span v-if="form.salesScenesType.indexOf('SALES_SCENES_WEWORK') > -1">
                    <div class="label-title-bottom">
                        <label><span class="span-font-color">|</span>企业微信</label>
                    </div>
                    <el-form-item label="商家企业微信CorpID">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>

                     <el-form-item label="企业微信页面截图">
                        <el-upload
                                class="avatar-uploader"
                                action="/upload/img2/permissionsPictureBank"
                                :auto-upload="autoUpload"
                                name="file"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <!--用于上传图片预览-->
                            <img v-if="img" :src="img"  class="avatar">
                            <!--用于展示上传图标，当imageUrl为null时，就展示空白，当imageUrl有了值，就会展示指向该地址的图片-->
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>

                    <el-form-item label="互联网网站对应的商家AppID（选填）">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </span>
                <el-form-item>
                    <el-button type="primary" @click="retreat">上一步</el-button>
                    <el-button type="primary" @click="onSubmit">确认保存</el-button>
                </el-form-item>

            </el-form>
        </el-row>
    </div>
</div>

</div>
<script type="module">
    import bnApi from '../../operation/js/config/public.js';
    var vue = new Vue({
        el: '#app',
        data: {
            autoUpload: true,
            validityOfCertificate:2,//证件有效期
            validityOfCertificate1:2,//证件有效期
            appIdClass:2,//公众号appId分类
            appAppIdClass:2,//app appId分类
            smallAppIdClass:2,//小程序appId分类
            form: {
                name: '',
                owner: '',
                idDocType:'',
                idType:'',
                salesScenesType:[]
            },
            img:""
        },
        methods: {
            onSubmit() {
                console.log('submit!');
                location.href = "add_merchants_wx2.html";
            },
            retreat(){
                location.href = "add_merchants_wx.html";
            },
            handleAvatarSuccess(){

            },
            beforeAvatarUpload(){
                // 可以在tomcat的conf的web.xml中找到相对应的文件类型
                var isJPG = file.type === 'image/jpeg'||'image/gif'||'image/png';

                var isLt2M = file.size / 1024 / 1024 < 4;
                if (!isLt2M) {
                    this.$message.error('上传套餐图片大小不能超过 4MB!');
                }
                return isJPG && isLt2M;
            },
            salesScenes(){
                console.log("经营场景类型",this.form.salesScenesType);
            }
        },
        mounted(){

        }
    })
</script>
</body>


</html>